<template>
    <!-- 权限配置弹窗 -->
    <el-dialog
        title="权限详情"
        :visible="visible"
        width="60%"
        :close-on-click-modal="true"
        :before-close="handleDialogClose"
        append-to-body
    >
        <el-form label-width="80px">
            <div v-if="loading" v-loading="true" class="loading"></div>
            <div v-else-if="isNoRightToAssignAuth" class="no-use-assign-auth">抱歉，您无权这么做，该资源应由对应租户来进行权限配置。</div>
            <template v-else>
                <el-form-item label="资源名称">
                    {{servicePath}}
                </el-form-item>
                <el-form-item label="权限列表">
                    <ul class="authList-wrap" v-if="authList && authList.length">
                        <li :class="{'auth-item': authList.length > 1}" v-for="(user) in authList" :key="user.userId">
                            <el-form-item :label="getUserFlag(user.role)" label-width="50px">
                                <span>{{ user.userName }}</span>
                            </el-form-item>
                            <el-form-item label="权限: " label-width="50px">
                                <el-tag class="tag" size="mini" v-for="au in user.auth" :key="au">{{ au }}</el-tag>
                            </el-form-item>
                        </li>
                    </ul>
                    <span v-else>无</span>
                </el-form-item>
            </template>
        </el-form>
    </el-dialog>
</template>
<script>
import { authApi } from '@/request'
import { mapState } from 'vuex'
import { MANAGER_ROLE_CODE, LOGINER_FLAG_MAP, API_ERROR_CODE } from '@/const'

let SERVICE = 'HDFS'

export default {
    name: 'authorityDetail',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        currentRow: {
            type: Object,
            default: {}
        },
        servicePath: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            loading: false,
            // 权限分配列表
            authList: [],
            // 临时添加的租户/用户权限分配（这时不同租户/用户权限一致）
            addSubordinatesForm: {
                subordinates: [],
                authoritys: [],
                authoritysCheckAll: false,
                isIndeterminate: false
            },
            // 总的权限列表
            totalAuthoritys: [],
            // 当前用户拥有的权限列表
            // currentUserAuth: [],
            roleFlag: '',
            // 无权这么做，该资源应由对应租户来进行权限配置
            isNoRightToAssignAuth: false
        }
    },
    computed: {
        ...mapState(['loginerRole']),
    },
    created() {
        SERVICE = this.$route.meta.service
        this.roleFlag = this.loginerRole === MANAGER_ROLE_CODE ? '租户' : '用户'
    },
    mounted() {
        this.getAuthInfo()
    },
    methods: {
        getAuthInfo() {
            this.loading = true
            authApi.getAuthInfo({ type: SERVICE, id: this.currentRow.resourceId })
            .then(res => {
                this.currentUserAuth = res.data.currentUserAuth
                this.authList = (res.data.authList || []).map(a => {
                    if (!a.auth) {
                        a.auth = []
                    } else if (typeof a.auth === 'string') {
                        a.auth = a.auth.split('|')
                    }
                    a.authoritysCheckAll = a.auth.length === this.totalAuthoritys.length
                    return a
                })
                this.loading = false
            }).catch((err) => {
                if (err && err.code === API_ERROR_CODE) {
                    this.isNoRightToAssignAuth = true
                }
                this.loading = false
            })
        },
        handleDialogClose() {
            this.authList = []
            this.$emit('update:visible', false)
        },
        getUserFlag(role) {
            return LOGINER_FLAG_MAP[role] || '用户'
        },
    }
}
</script>
<style lang="scss" scoped>
    @import '~@/styles/variables.scss';
    .authList-wrap {
        // padding-top: 30px;
        overflow-y: auto;
        .auth-item {
            border-bottom: 1px solid $lGray;
        }
    }
    .tag {
        margin-right: 15px;
    }
    .no-use-assign-auth {
        color: $red;
        text-align: center;
        font-size: 16px;
        padding-bottom: 30px;
    }
    .loading {
        width: 50px;
        height: 40px;
    }
</style>
